<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎登陆！</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="static/bootstrap-3.4.1/js/jquery.min.js"
          integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
          crossorigin="anonymous"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="Bootstrap/js/bootstrap.min.js"
          integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
          crossorigin="anonymous"></script>
    <style>
    body{
      font-family: "微软雅黑";
      background: url("img/1.jpg") no-repeat;
      background-attachment: fixed;
      background-size: cover;
      color: white;
      text-align: center;
    }

    .box{
      position: absolute;
      top:50%;
      margin-top: -200px;
      left: 50%;
      margin-left: -200px;
      border:1px solid black;
      width: 400px;
      height: 400px;
      background-color: #00000068;
      border-radius: 10px;
      box-shadow: 10px 10px 10px 10px rgba(0,0,0, .3);
    }
    .but{
      width: 40%;
      background-image: linear-gradient(120deg,#f6d365 0%,#fda085 100%);
      border-radius: 40px;
      border: 0px;
      font-size: 20px;
      color: white;
    }
    .but:hover{
      background-image:linear-gradient(to right,#b4731d 0%,#f16943 100%);
    }
    .box1{
      margin-top: 75px;
    }
    .box2{
      margin-top: 50px;
    }
    .box3{
      margin-top: 25px;
    }
    .box4{
      margin-top: 25px;
    }
    .box5{
      margin-top: 25px;
    }
    a{
      text-decoration: none;
    }
    .form-control{
      background-color: rgba(255,255,255,0);
      width: 60%;
      border: 0px;
      border-bottom: 2px solid silver;
      outline: none;
      color: white;
    }
  </style>
</head>
<body>
<div class="box">
    <form class="form-horizontal col-sm-offset-3 col-md-offset-3" action="/project1_war/mainUserLoginServlet"
          method="post">
      <h1>登录</h1>
        <div class="box1">
          用户名：<input class="form-control" type="text" name="mainuserName" id="mainuserName" placeholder="请输入用户名"
                 required
                 autofocus>
        </div>
        <div class="box2">
          密码：<input class="form-control " type="password" name="mainuserPassword" id="mainuserPassword"
                 placeholder="请输入密码"
                 required >
        </div>
        <div class="box3">
          <a href="MainUserRegister.jsp">没有账号？立即注册</a>
        </div>
        <div class="box4">
          <a href="MainUserPassword1.jsp">忘记密码？立即找回</a>
        </div>
        <div class="box5">
          <input type="submit" value="登录" class="but">
          <a href="/project1_war/HomePage.jsp"><input type="button" value="返回" class="but"></a>
        </div>
    </form>
  </div>
</body>
</html>
